<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sugar</title>
    <!-- 1.0 导包 -->
    <script src="./tinymce/tinymce.min.js"></script>
  </head>

  <body>
    <!-- 🧨 设置和获取富文本插件的内容 -->
    <button id="setBtn">功能1：设置内容</button>
    <button id="getBtn">功能2：获取内容</button>
    <!-- 2.0 准备一个 textarea -->
    <textarea name="content" id="content">111</textarea>
    <!-- 3.0 初始化插件 -->
    <script>
      tinymce.init({
        selector: '#content',
        height: '350px',
        language: 'zh_CN',
        directionality: 'ltl',
        browser_spellcheck: true,
        contextmenu: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table contextmenu paste imagetools wordcount',
          'code',
        ],
        toolbar:
          'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
      })
    </script>
    <script>
      // 后端返回的新闻内容
      const content = 'B站的月活仍具想象空间，这在移动互联网流量红利终结的背景下显得异常珍贵。'

      // 点击 setBtn 按钮把新闻内容设置到 tinymce 富文本插件中
      const setBtn = document.querySelector('#setBtn')
      const getBtn = document.querySelector('#getBtn')

      setBtn.onclick = function () {
        // console.log(tinymce)
        /* 1️⃣ 功能1：设置内容 */
        tinymce.activeEditor.setContent(content)
      }

      getBtn.onclick = function () {
        /* 2️⃣ 功能2：获取内容 */
        const res = tinymce.activeEditor.getContent()
        console.log(res)
      }
    </script>
  </body>
</html>
